<template>
    <view class="seller-item">
        <view class="seller-item-owner">
            <u-text
                :text="'#'+exchangeOrder.code+'/'+ nftTotal"
                size="36rpx"
                bold
            ></u-text>
            <view class="seller-salse">
                <view class="seller-salse-label">售价</view>
                <u-text
                    :text="exchangeOrder.money"
                    color="#000000"
                    bold
                    size="40rpx"
                    prefixIcon="rmb"
                    iconStyle="font-size: 26rpx; color: #000000; font-weight: bold;top: 10rpx;"
                ></u-text>
            </view>
        </view>
        <view class="nft-owner-info">
            <view class="user-info">
                <u-image
                   :src="exchangeOrder.user.avatar"
                   width="40rpx"
                   height="40rpx"
                   shape="circle"
                ></u-image>
                <u-text
                    :text="exchangeOrder.user.nickName"
                    size="26rpx"
                    margin="0 0 0 10rpx"
                ></u-text>
            </view>
            <view class="buy-nft-btn" @click="goBuy">去购买</view>
        </view>
        <u-line color="#E4E4E4" margin="44rpx 0 0 0"></u-line>
    </view>
</template>

<script>
    export default {
        name: "index",
        props: {
            exchangeOrder: {
                type: Object,
                default: () => {}
            },
            nftTotal: {
                type: [String, Number],
                default: null
            }
        },
        methods: {
            goBuy() {
                this.$emit("buy")
            }
        }
    }
</script>

<style lang="scss" scoped>
    .seller-item {
        padding: 44rpx 40rpx 0 40rpx;
        .seller-item-owner {
            display: flex;
            justify-content: space-between;
            .seller-salse {
                display: flex;
                align-items: center;
                .seller-salse-label {
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    margin-right: 10rpx;
                }
            }
        }
        .nft-owner-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20rpx;
            .user-info {
                display: flex;
                align-items: center;
            }
            .buy-nft-btn {
                width: 200rpx;
                height: 56rpx;
                background: linear-gradient(286deg, #515151 0%, #282828 100%);
                border-radius: 4rpx;
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 56rpx;
                margin-right: 12rpx;
            }
        }
    }
</style>
